<template>
  <div class="full" v-loading="dataInfo.loading" element-loading-text="数据加载中...">
    <el-scrollbar>
      <div class="p-12">
        <ListFlexBox :data="dataInfo.address" :list="4" :padding="16" :isAdd="isEdit" class="addressBox"
          @addBtn="addAddress">
          <template #item="{ row }">
            <div class="list-b-8">
              <h3 class="list-r-8">
                <span>{{ row.contactPersonName }}</span>
                <span>{{ row.contactTelephone }}</span>
              </h3>
              <p>{{ `${row.fullReceiveAddress}` }}</p>
              <el-tag class="tag" type="primary" effect="dark" round v-if="row.isDefaultReceive === 1">默认地址</el-tag>
              <div class="btn" v-if="isEdit">
                <span v-if="row.isDefaultReceive === 0" @click="setAddress(row)">设为默认</span>
                <span @click="editAddress(row)">编辑</span>
                <span @click="delAddress(row)">删除</span>
              </div>
            </div>
          </template>
        </ListFlexBox>
      </div>
    </el-scrollbar>
  </div>
  <ElPupFormBox :pup="pupAdd">
    <ElFormItemBox label="收货姓名" prop="contactPersonName" isRules>
      <ElInputBox :data="pupAdd.form" dataName="contactPersonName" />
    </ElFormItemBox>
    <ElFormItemBox label="收货电话" prop="contactTelephone" isRules>
      <ElInputBox :data="pupAdd.form" dataName="contactTelephone" />
    </ElFormItemBox>
    <div class="list-b-8">
      <ElFormItemBox label="收货人地址" prop="country" isRules>
        <ElCascaderBox :data="pupAdd.form" :dataName="['province', 'city', 'country']" :options="options.treeArea"
          labelName="areaName" valueName="areaCode" />
      </ElFormItemBox>
      <ElFormItemBox label=" " prop="detailedAddress" isRules>
        <ElInputBox :data="pupAdd.form" dataName="detailedAddress" type="textarea" />
      </ElFormItemBox>
      <ElFormItemBox label=" " prop="">
        <el-checkbox v-model="pupAdd.form.isDefaultReceive" label="设为默认地址" :true-value="1" :false-value="0" />
      </ElFormItemBox>
    </div>
  </ElPupFormBox>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    customerCode?: string;//客户code
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    imageViewer?: any;//预览图片
  }>(),
  {
  },
);
//地址信息
const dataInfo: any = reactive({
  loading: false,
  address: []
})
const pupAdd = reactive({
  state: false,
  typeName: 0,
  title: `收货地址`,
  width: 600,
  height: 'auto',
  form: {
    receiveAddressID: '', // 收货地址主键ID
    customerCode: "", // 客户代码
    contactPersonName: "", // 联系人姓名
    companyName: "", // 公司名称
    contactPersonSex: 1, // 联系人性别：1男；2女
    contactTelephone: "", // 联系人电话
    province: "", // 所在省代码
    city: "", // 所在市代码
    country: "", // 所在县代码
    detailedAddress: "", // 详细收货地址
    isDefaultReceive: 0, // 是否默认收货地址：1是；0否
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        saveAddress(pup)
      }
    }
  ]
});
//设置默认地址
const saveAddress = (pup: any) => {
  let _form = pup.form
  if (_form.receiveAddressID) {
    proxy.$api.OrderBusniess.UpdateReceiveAddress(_form)
      .then((res: any) => {
        _sun()
      }).catch(() => {
        pup.loading = false
      })
  } else {
    proxy.$api.OrderBusniess.AddReceiveAddress({
      ..._form,
      customerCode: props.customerCode,
    })
      .then((res: any) => {
        _sun()
      }).catch(() => {
        pup.loading = false
      })
  }
  function _sun() {
    proxy.$message('保存成功')
    pup.state = false
    getAddress()
  }
};
//新建地址
const addAddress = () => {
  proxy.$openPup(pupAdd, 1)
};
//设置默认地址
const editAddress = (row: any) => {
  proxy.$openPup(pupAdd, 2)
  pupAdd.form = JSON.parse(JSON.stringify(row))
};
//设置默认地址
const setAddress = (row: any) => {
  proxy.$api.OrderBusniess.SetDefaultReceiveAddress({
    customerCode: props.customerCode,
    receiveAddressID: row.receiveAddressID,
  })
    .then((res: any) => {
      proxy.$message('设置成功')
      getAddress()
    })
};
//删除地址
const delAddress = (row: any) => {
  proxy.$messageBox('是否删除当前数据，请确认！', () => {
    if (row.isDefaultReceive === 1) {
      proxy.$message(`默认地址不能删除`, 'error');
      return
    }
    proxy.$api.OrderBusniess.DeleteReceiveAddress({
      customerCode: props.customerCode,
      receiveAddressID: row.receiveAddressID,
    })
      .then((res: any) => {
        proxy.$message(`删除成功`);
        getAddress()
      })
      .catch(() => { });
  });
};
//客户地址
const getAddress = () => {
  dataInfo.loading = true
  proxy.$api.OrderBusniess.QueryCustomersReceiveAddresses({
    customerCode: props.customerCode,
  })
    .then((res: any) => {
      dataInfo.address = res
      dataInfo.loading = false
    }).catch(() => {
      dataInfo.loading = false
    })
};
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
onMounted(() => {
  getAddress();
});
</script>
<style lang="scss">
.addressBox {
  p {
    filter: alpha(opacity=0.8);
    opacity: 0.8;
  }

  li {
    padding-bottom: 30px !important;

    .btn {
      display: none;
      position: absolute;
      right: 0;
      bottom: 0;
      padding: 4px 8px;
      background-color: $primary;
      color: #fff;
      border-top-left-radius: 4px;

      span {
        position: relative;
        cursor: pointer;

        &:not(:last-child) {
          margin-right: 8px;
          padding-right: 8px;

          &::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            right: 0;
            height: 14px;
            border-right: 1px #fff solid;
            filter: alpha(opacity=0.4);
            opacity: 0.4;
          }
        }
      }
    }

    &:hover {
      .btn {
        display: flex;
      }
    }

    .tag {
      position: absolute;
      left: 16px;
      bottom: 8px;
      margin: 0 !important;
    }
  }
}
</style>
